<script>
import { Icon, ActionSheet } from 'vant'
import Taro from '@tarojs/taro'

export default {
  components: {
    [Icon.name]: Icon,
    [ActionSheet.name]: ActionSheet
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      show: false
    }
  },
  mounted() {
    const hasPlayed = Taro.getStorageSync(this.name)
    console.log(hasPlayed, this.name)
    setTimeout(() => {
      this.show = !hasPlayed
      Taro.setStorageSync(this.name, true)
    }, 100)
  },
  methods: {
    toggle(e, show) {
      e.stopPropagation()
      console.log('g-help')
      this.show = show
    },
    stop(e) {
      e.stopPropagation()
    }
  }
}
</script>

<template>
  <div @click="stop">
    <div
      class="g-help"
      @click="toggle($event, true)"
    >
      <span>说明</span>
      <van-icon name="question-o" />
    </div>
    <van-action-sheet
      v-model="show"
      title="说明"
    >
      <div class="g-help-content">
        <slot><div v-html="content" /></slot>
      </div>
    </van-action-sheet>
  </div>

</template>

<style lang="less">
.g-help {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 40px;
}

.van-action-sheet__header {
  font-size: 48px;
  margin-bottom: 20px;
}

.g-help-content {
  padding: 0 40px 40px;
  font-size: 40px;
  line-height: 1.8;
  height: 500px;
  text-indent: 2em;
}
</style>
